<template>
  <div class="nowAreaStatus">
    <x-header class="header" :left-options="{showBack: showHeaderBack}" ref="header">
      当前场内状况
      <a v-if="loadingStatus" slot="right" >刷新中...</a>
      <a v-else slot="right" @click="refreshPage(true)" >刷新页面</a>
    </x-header>
    <div class="topHolder"></div>
    <card :header="{title: '当前场内状况'}">
      <div slot="content" class="card-content">
        <div class="vux-1px-r">
          <span><span v-text="areaStatusInfo.tableNums"></span>台</span>
          <br/>
          当前场内美女台
        </div>
        <div class="vux-1px-r">
          <span><span v-text="areaStatusInfo.customerNums"></span>人</span>
          <br/>
          当前场内总人数
        </div>
      </div>
    </card>
    <group title="详情列表：">
      <x-table :cell-bordered="false">
        <thead>
        <tr style="background-color: #F7F7F7">
          <th width="25%"></th>
          <th width="24%">总数</th>
          <th width="23%">空台位</th>
          <th width="28%">已坐台位</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in areaStatusInfo.list" :key="index">
          <td v-text="item.typeName"></td>
          <td v-text="item.total"></td>
          <td v-text="item.empty"></td>
          <td v-text="item.seated"></td>
        </tr>
        <tr v-if="JSON.stringify(areaStatusInfo) != '{}' && areaStatusInfo.list.length <= 0">
          <td colspan="4">
            <div class="listNoItem">暂无场内状况数据</div>
          </td>
        </tr>
        <tr>
          <td>全部类型</td>
          <td v-text="totals"></td>
          <td v-text="emptys"></td>
          <td v-text="seateds"></td>
        </tr>
        </tbody>
      </x-table>
    </group>
  </div>
</template>

<script>
  import {getNowAreaStatus} from "../../api";
  import { Card, Box, XButton, Group, XTable } from 'vux'
  import {message} from "../../common/util";

  export default {
    name:'nowAreaStatus',
    data(){
      return{
        showHeaderBack:this.GLOBAL.showHeaderBack,
        loadingStatus:false,
        areaStatusInfo:{},
        totals:0,
        emptys:0,
        seateds:0
      }
    },
    components:{
      Card,
      Box,
      XButton,
      Group,
      XTable
    },
    computed:{
      authority(){
        return this.$store.getters.getAuthority
      }
    },
    methods:{
      refreshPage(mess){
        this.loadingStatus = true
        this.totals=0
        this.emptys=0
        this.seateds=0
        getNowAreaStatus().then((res)=>{
          if(res.status == 'success'){
            this.areaStatusInfo = res.data
            for(let item of this.areaStatusInfo.list){
              item.total = item.empty + item.seated
              this.totals += item.total
              this.emptys += item.empty
              this.seateds += item.seated
            }
            if(mess)message({message:'刷新页面成功',type:'info'})
          }else if(res.status == 'error') {
            message({message:res.msg,type:'error'})
            console.log('getNowAreaStatus error info:', res.msg)
          }
          this.loadingStatus = false
        }).catch((err)=>{console.log('getNowAreaStatus catch info:',err)})
        this.$store.commit('updateLoadingStatus',{isLoading:false})
        //this.$router.go(0)
      }
    },
    mounted(){
      this.refreshPage()
    }
  }
</script>

<style lang="scss" scoped>
  .nowAreaStatus{
    .card-content {display: flex;padding: 10px 0;}
    .card-content > div {flex: 1;text-align: center;font-size: 0.9rem;}
    .card-content span {color: #f74c31;font-size: 1.8rem;}
  }
</style>
